import React, { PureComponent, Fragment } from 'react';

import {
    Input,
    Checkbox
} from 'antd';

class CheckInput extends PureComponent{
    constructor(props){
        super(props);
        this.state = {
            disabled:!this.props.data['value'],
            placeholder:this.props.placeholder,
            autoFocus:this.props.autoFocus,
            data:this.props.data,
            value:this.props.data['value'],
            checked:!this.props.data['value'],
        }
    }
    render(){
        const { disabled, placeholder, autoFocus, checked, data, value } = this.state;
        const { form } = this.props;
        return (
            // <div>
            //     {/* <Checkbox.Group onChange={this.checkedChange} defaultValue={!disabled?['1']:[]}>
            //         <Checkbox value="1"></Checkbox>
            //     </Checkbox.Group> */}
            //     <Checkbox name={data['name']+"_test"} onChange={this.checkedChange} checked={!checked}></Checkbox>
            //     <Input placeholder={placeholder} autoFocus={autoFocus?autoFocus:false} disabled={disabled?disabled:false} onChange={this.inputChange} defaultValue={data['value']} />
            // </div>
            <Fragment>
                <Checkbox name={data['name']+"_test"} onChange={this.checkedChange.bind(this,data)} checked={!checked}></Checkbox>
                {form.getFieldDecorator(`${data['name']}`,{
                    rules : data['rules'],
                    initialValue : data['value']
                })(
                    <div>
                        <Input placeholder={placeholder} autoFocus={autoFocus?autoFocus:false} disabled={disabled?disabled:false} onChange={this.inputChange} defaultValue={value} value={value} />
                    </div>
                )}
            </Fragment>
        )
    }

    componentDidMount () {
    }
    checkedChange=(data,e)=>{
        //const { onChange } = this.props;
        if(e.target.checked){
            this.setState({
                disabled:false,
                checked: !e.target.checked
            })
            this.props.form.setFieldsValue({[data["name"]]:this.state.value});
        }else{
            this.setState({
                disabled:true,
                checked: !e.target.checked
            })
            this.props.form.setFieldsValue({[data["name"]]:""});
        }
        //onChange(e);
    }
    inputChange = (e)=>{
        const { oninputChange } = this.props;
        this.setState({
            value: e.target.value
        })
        oninputChange(e.target.value)
    }
}

export default CheckInput;